<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    const p1 = new Promise((resolve, reject) => {
      try {
        console.log("请求数据A")
        // throw new Error("A错误")
        setTimeout(() => {
          console.log("请求A结束....");
          resolve("A数据")
        }, 1500)
      } catch (e) {
        reject(e.message)
      }
    })

    const p2 = new Promise((resolve, reject) => {
      try {
        console.log("请求数据B")
        // throw new Error("B错误")
        setTimeout(() => {
          console.log("请求B结束....");
          resolve("B数据")
        }, 2500)
      } catch (e) {
        reject(e.message)
      }
    })


    const p3 = new Promise((resolve, reject) => {
      try {
        console.log("请求数据C")
        // throw new Error("C错误")
        setTimeout(() => {
          console.log("请求C结束....");
          resolve("C数据")
        }, 2000)
      } catch (e) {
        reject(e.message)
      }
    })

    /* 
      Promise.race方法:
        - 监听 promise 实例中改变状态最快的哪一个,无论成功还是失败
        - race 的返回值跟最快 promise 实例保持一致
    */

    const result = Promise.race([p1,p2,p3]);
    console.log("result", result);
    result.then(value => {
      console.log("全部完成");
    }).catch(reason => {
      console.log("有错误的", reason);
    })


    // 第一遍 promise.race
     
    const k = new Promise((resolve,reject)=>{
      try{
        console.log('请求A数据');
        // throw new Error('网络问题')
        setTimeout(()=>{
          console.log('请求A数据成功');
          resolve('A数据')
        },2000)
      }catch(e){
        reject(e.message)
      }
    });
    const k1 = new Promise((resolve,reject)=>{
      try{
        console.log('请求B数据');
        // throw new Error('网络问题')
        setTimeout(()=>{
          console.log('请求B数据成功');
          resolve('B数据')
        },1000)
      }catch(e){
        reject(e.message)
      }
    });
    const k2 = new Promise((resolve,reject)=>{
      try{
        console.log('请求C数据');
        // throw new Error('网络问题')
        setTimeout(()=>{
          console.log('请求C数据成功');
          resolve('C数据')
        },3000)
      }catch(e){
        reject(e.message)
      }
    });
    // Promise.race方法:
    //     - 监听 promise 实例中改变状态最快的哪一个,无论成功还是失败
    //     - race 的返回值跟最快 promise 实例保持一致
    const result1 = Promise.race([k,k1,k2]);
    console.log('result1',result1);
    result1.then((value)=>{
      console.log('全部获取成功');
    },(reason)=>{
      console.log('出错啦',reason);
    });




    //第二遍 promise.race
    const two = new Promise((resolve,reject)=>{
      try{
        console.log('请求姓名数据');
        // throw new Error('网络问题')
        setTimeout(()=>{
          console.log('请求姓名数据成功');
          resolve('姓名数据')
        },2000)
      }catch(e){
        reject(e.message)
      }
    });

    const two1 = new Promise((resolve,reject)=>{
      try{
        console.log('请求支出数据');
        // throw new Error('网络问题')
        setTimeout(()=>{
          console.log('请求支出数据成功');
          resolve('支出数据')
        },3000)
      }catch(e){
        reject(e.message)
      }
    });

    const two2 = new Promise((resolve,reject)=>{
      try{
        console.log('请求收入数据');
        // throw new Error('网络问题')
        setTimeout(()=>{
          console.log('请求收入数据成功');
          resolve('收入数据')
        },1500)
      }catch(e){
        reject(e.message)
      }
    });

    // Promise.race方法:
    //     - 监听 promise 实例中改变状态最快的哪一个,无论成功还是失败
    //     - race 的返回值跟最快 promise 实例保持一致
    const result2 = Promise.race([two,two1,two2]);
    console.log('result2',result2);
    result2.then((value)=>{
      console.log('全部获取成功');
    },(reason)=>{
      console.log('出错啦',reason);
    });




    //第三遍 promise.race
    const three = new Promise((resolve,reject)=>{
      try{
        console.log('请求姓名数据');
        // throw new Error('网络问题')
        setTimeout(()=>{
          console.log('请求姓名数据成功');
          resolve('姓名数据')
        },1000)
      }catch(e){
        reject(e.message)
      }
    })

    const three1 = new Promise((resolve,reject)=>{
      try{
        console.log('请求年龄数据');
        // throw new Error('网络问题')
        setTimeout(()=>{
          console.log('请求年龄数据成功');
          resolve('年龄数据')
        },2000)
      }catch(e){
        reject(e.message)
      }
    });

    const three2 = new Promise((resolve,reject)=>{
      try{
        console.log('请求爱好数据');
        // throw new Error('网络问题')
        setTimeout(()=>{
          console.log('请求爱好数据成功');
          resolve('爱好数据')
        },3000)
      }catch(e){
        reject(e.message)
      }
    });
    // Promise.race方法:
    //     - 监听 promise 实例中改变状态最快的哪一个,无论成功还是失败
    //     - race 的返回值跟最快 promise 实例保持一致
    const result3 = Promise.race([three,three1,three2]);
    console.log('result3',result3);
    result3.then((value)=>{
      console.log('全部获取成功');
    },(reason)=>{
      console.log('出错啦',reason);
    });

    
  </script>
</body>

</html>